import {defineComponent, reactive} from "vue";
import "./css/index.css"
import {formatDateTime, getAssetsImages} from "@/utils/utils";
import {InformationStore} from "@/stores/information";
import {storeToRefs} from "pinia";
import {useRouter} from "vue-router";
export default defineComponent({
    setup(){
        const information_store = InformationStore()
        const {informationList}  = storeToRefs(information_store)
        const router = useRouter()
        information_store.getInformationList({
            pageSize:8
        })

        const images = reactive({
            view:getAssetsImages("view.png"),
            zan:getAssetsImages("zan.png")
        })
        const handleDetails = async (id) => {
            // 将该资讯的浏览量+1
            const code = await information_store.updateInformationRecord(id, 'view')
            if (code === 0) {
                // 跳转值详情页面
                router.push({name: 'informationDetails', query: {id}})
            }
        }

        return () => {
            const cardList = informationList.value.map((item)=>{
                return <>
                    <el-card body-style={ {
                        padding: '0px',
                    }}
                             onClick={()=>{handleDetails(item.id)}}
                             style = {{
                                 width : '100%',
                                 marginBottom:'20px',
                             }}>
                        <div className="image">
                            <el-image style={{
                                width:'100%',
                                height:'100%',
                            }} src={item.info_img} fit={'cover'} />
                        </div>
                        <div className="text">
                            <div className="tit">{item.info_title}</div>
                            <div className="time">
                                <p>{formatDateTime(item.createdAt)}</p>
                            </div>
                            <div className="icons">
                                <div className="icon">
                                    <img src={images.zan} alt=""/>
                                    <p>{item.record_info.love}</p>
                                </div>
                                <div className="icon">
                                    <img src={images.view} alt=""/>
                                    <p>{item.record_info.view}</p>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </>
            })
            return <>
                <div className="information-box">
                    <div className="information-title">众筹资讯</div>
                    <div className="cont">
                        {cardList}
                    </div>
                </div>
            </>
        }
    }
})